<template>
  <div class="common-layout">
    <div id="borderDiv">
      <div id="logo">
        <el-image style="width: 20%; height: 20%" :src="imgPrefix+'ciecleLogo.png'" :fit="fill"/>
        <p style="color: black;font-size: 20px">金粽子国际影城售票系统</p>
      </div>
      <div id="mainDiv">
        <p id="systemName">注册</p>
        <el-form
            ref="registerForm"
            :label-position="labelPosition"
            label-width="auto"
            :model="user"
            :rules="rules"
            :size="'large'"
            style="max-width: 600px">
          <el-form-item label="用户名:" :label-position="itemLabelPosition" prop="username">
            <el-input v-model="user.username" :prefix-icon="User" style="width: 240px" size=""
                      placeholder="请输入用户名" clearable/>
          </el-form-item>
          <el-form-item label="密码:" :label-position="itemLabelPosition" prop="password">
            <el-input v-model="user.password" :prefix-icon="Lock" style="width: 240px" type="password"
                      placeholder="请输入密码"
                      show-password/>
          </el-form-item>
          <el-form-item label="昵称:" :label-position="itemLabelPosition" prop="displayName">
            <el-input v-model="user.displayName" :prefix-icon="UserFilled" style="width: 240px" size=""
                      placeholder="请输入昵称" clearable/>
          </el-form-item>
          <el-form-item label="手机号:" :label-position="itemLabelPosition" prop="phone">
            <el-input v-model="user.phone" :prefix-icon="Cellphone" style="width: 240px" size=""
                      placeholder="请输入手机号"
                      clearable/>
          </el-form-item>
          <el-form-item id="RegisterButtonItem">
            <div id="registerButton">
              <el-button type="primary" plain style="width: 100%;margin: 0 auto" @click="handleRegister">
                注册
              </el-button>
              <el-button type="warning" plain style="width: 100%;margin: 0 auto" @click="cancelRegister">
                取消
              </el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, reactive, inject} from "vue";
import {Lock, User, Cellphone, UserFilled} from "@element-plus/icons-vue";
// 图片前缀全局变量
const imgPrefix = inject('imgPrefix');
const user = reactive({
  username: "",
  password: "",
  displayName: "",
  phone: "",
})

const router = useRouter();

const labelPosition = ref('right')
const itemLabelPosition = ref('right')

const rules = reactive({
  username: [
    {required: true, message: '用户名不可为空！', trigger: 'blur'},
    {min: 4, max: 12, message: '用户名长度在4到12个字符之间', trigger: 'blur'},
  ],
  password: [
    {required: true, message: '密码不可为空！', trigger: 'blur'},
    {min: 6, max: 12, message: '密码长度在6到12位之间', trigger: 'blur'},
  ],
  displayName: [
    {required: true, message: '昵称不可为空！', trigger: 'blur'},
    {min: 1, max: 10, message: '昵称长度在1到10位之间', trigger: 'blur'},
  ],
  phone: [
    {required: true, message: '手机号不可为空！', trigger: 'blur'},
    {min: 11, max: 11, message: '手机号长度为11位！', trigger: 'blur'},
  ]
})
// 注册取消
const cancelRegister = async () => {
  router.push({path: "/login"})
}
import {getCurrentInstance} from "vue";
import {ElNotification} from "element-plus";
import request from "../request.js";
import qs from 'qs'
import {useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
// 注册
const handleRegister = async () => {
  const formObj = proxy.$refs.registerForm;
  console.log(">>> 注册表单的内容：" + JSON.stringify(formObj));

  // 按钮发送http请求之前的执行表单校验
  await formObj.validate((valid) => {

    if (valid) {
      console.log("表单校验通过");

      request({
        url: "/user/regist",
        method: "post",
        data: JSON.stringify(user)
      }).then(res => {
        if ('200' === res.code) {
          ElNotification({
            type: 'success',
            message: res.msg
          })
          router.push({path: "/login"})
        } else {
          ElNotification({
            type: 'error',
            message: res.msg
          })
        }

      });
    } else {
      ElNotification({
        type: 'error',
        message: '格式错误！'
      })
    }

  })
}
</script>
<style scoped>
#borderDiv {
  display: flex;

  border: 4px solid transparent;
  border-radius: 16px;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, white, white), linear-gradient(90deg, #8F41E9, #578AEF);

}

#logo {
  width: 500px;
  padding-top: 300px;
}

.common-layout {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#mainDiv {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  flex-direction: column;
  padding: 100px;
}

main {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  height: 100%;
}

#systemName {
  padding-bottom: 20px;
  color: black;
  font-size: 30px;

}

#registerButton {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

#RegisterButtonItem {
  height: 100%;
  width: 100%;
}

</style>